<template>
  <!-- 饼环图 -->
  <div :style="{height:this.height+'px',width:'100%'}">
    <Row
      v-if="option.series.length==0"
      class="bg-fff"
      style="height:300px;"
      type="flex"
      align="middle"
      justify="center"
    >
      <img src="@/assets/img/efficiencyAnalysis/zwsj.png" height="50%" />
    </Row>
    <div v-else ref="main" :style="{height:this.height+'px',width: '100%'}"></div>
  </div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  props: {
    height: {
      type: Number,
      default: 300
    },
    viewData: {
      type: Object,
      default: null
    },
    unit: {
      type: String,
      default: ""
    },
    //标题组件位置
    lPositioning: {
      type: Object,
      default: () => {
        return {
          left: 20,
          top: 20
        };
      }
    },
    lItemGap: {
      type: Number,
      default: 20
    },
    iCon: {
      type: String,
      default: "circle"
    },
    legendWH: {
      type: Number,
      default: 10 //测试要求图例circle宽高10px
    },
    legendType: {
      type: String,
      default: "plain" //测试要求图例circle宽高10px
    }
  },
  components: {},
  data() {
    return {
      option: {
        series: []
      }
    };
  },
  computed: {},
  watch: {
    viewData(value) {
      if (value.sData) {
        this.option = {
          title: value.title,
          color: value.color||Style.color,
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  color: "#666",
                  width: 180
                },
                // value: {
                //   fontSize: 14,
                //   color: "#666",
                //   verticalAlign: "top",
                //   align: "left",
                //   padding: [0, 0, 0, 15],
                //   width: 100
                // },
                rate: {
                  fontSize: 14,
                  color: "#666",
                  verticalAlign: "top",
                  align: "left",
                  padding: [0, 0, 0, 15],
                  width: 50
                }
              }
            },
            type:this.legendType,
            orient: "vertical",
            ...this.lPositioning,
            icon: this.iCon,
            itemWidth: this.legendWH,
            itemHeight: this.legendWH,
            itemGap: this.lItemGap,
            data: value.lData != null ? value.lData : [],
            formatter: function (name){
              let str1='',str2='',str3='';
              value.sData[0].data.map(item=>{
                if(item.name===name){
                   
                    str1 = `${item.name}:  ${item.value}`
                    str2 = `${(item.rate)}`
                    
                }
                
              })
              const arr = [`{name|${str1}}`,`{rate|${str2}}`];  
               return arr.join("");
          },
            pageIconSize:10
          },
          series: value.sData != null ? value.sData : []
        };
        this.$nextTick(() => {
          let myChart = this.$echarts.init(this.$refs.main);
          myChart.setOption(this.option, true);
          myChart.resize();
        });
      } else {
        this.option = {
          color: value.color||Style.color,
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            ...this.lPositioning,
            ...this.iCon,
            itemGap: this.lItemGap,
            data: []
          },
          series: []
        };
        this.$nextTick(() => {
          let myChart = this.$echarts.init(this.$refs.main);
          myChart.setOption(this.option, true);
          myChart.resize();
        });
      }
    }
  },
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
